[제이쿼리] 선택자 api, 특정 텍스트 포함 요소찾기 :contains()

10,714
View Count

주소 복사하기

제이쿼리에서 특정 텍스트 문구가 포함된 요소를 찾을경우 아래의 :contains() 셀렉터를 사용합니다. 이 셀렉터를 사용하면 매우 쉽게 원하는 요소를 선택이 가능합니다. 아래는 사용방법입니다.

선택할 요소:contains("찾을 텍스트 또는 문자열");

! :contains() 예제보기

아래 예제는 p태그에 'best'라는 문구가 있는지 확인하여 포함된 태그를 선택 후 해당 폰트색을 빨간색으로 변경하는 코드입니다.

<html>
<head>
<style type="text/css">
</style>
</head>

<body>
<p>Great site!</p>
<p>Best site!</p>
<p>Visit our site!</p>
</body>

<script type="text/javascript">
$('p:contains("best")').css('color', '#f00');
</script>
</html>

Great site!

Best site!

Visit our site!

// 'best'를 가진 요소만 스타일이 적용되었음

참고로 대소문자는 구분하지 않으며 해당 문자열이 있는지만 확인해 요소를 선택합니다.
그리고 만약 텍스트가 아닌 요소가 있는지를 확인할 경우 contains() 메소드를 이용할 수 있습니다.

선택자 요소 찾기 텍스트 찾기 contains()

아래의 글도 찾고 계시지 않나요?

[자바스크립트] 난수, 랜덤 숫자 만들기 예제

[자바스크립트] switch 조건문 사용방법